{extend name="../../../view/public/base" /}
{block name="css"}
<style>
    .layui-laypage .layui-laypage-curr em {
        position: relative;
        color: #fff!important;
    }
    .top-panel {
        border: 1px solid #eceff9;
        border-radius: 5px;
        text-align: center;
    }
    .top-panel > .layui-card-body{
        height: 60px;
    }
    .top-panel-number{
        line-height:60px;
        font-size: 30px;
        border-right:1px solid #eceff9;
    }
    .top-panel-tips{
        line-height:30px;
        font-size: 12px
    }

    .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
    .icon {margin-right:10px;color:#1aa094;}
    .icon-cray {color:#ffb800!important;}
    .icon-blue {color:#1e9fff!important;}
    .icon-tip {color:#ff5722!important;}
    .layuimini-qiuck-module {text-align:center;margin-top: 10px}
    .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
    .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
    .welcome-module {width:100%;height:210px;}
    .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
    .panel-body {padding:10px}
    .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
    .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
    .layui-red {color:red}
    .main_btn > p {height:40px;}
    .layui-bg-number {background-color:#F8F8F8;}
    .layuimini-notice:hover {background:#f6f6f6;}
    .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
    .layuimini-notice-title,.layuimini-notice-label {
        padding-right: 70px !important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;}
    .layuimini-notice-title {line-height:28px;font-size:14px;}
    .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
</style>
{/block}
{block name="body"}
<div class="layuimini-main">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-xs12 layui-col-md3">

                <div class="layui-card top-panel">
                    <div class="layui-card-header">今日新增会员数量</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs9 layui-col-md6 top-panel-number">
                               {$user_total.today}
                            </div>
                            <div class="layui-col-xs3 layui-col-md6 top-panel-tips">
                                昨日数量<a style="color: #1aa094">{$user_total.yesterday}</a><br>
                                前七日数量 <a style="color: #bd3004">{$user_total.week}</a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="layui-col-xs12 layui-col-md3">

                <div class="layui-card top-panel">
                    <div class="layui-card-header">今日会员总提现</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs9 layui-col-md6 top-panel-number">
                                {$extract_total.today}
                            </div>
                            <div class="layui-col-xs3 layui-col-md6 top-panel-tips">
                                昨日提现<a style="color: #1aa094">{$extract_total.yesterday}</a><br>
                                前七日提现 <a style="color: #bd3004">{$extract_total.week}</a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="layui-col-xs12 layui-col-md3">

                <div class="layui-card top-panel">
                    <div class="layui-card-header">今日会员总充值</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs9 layui-col-md6 top-panel-number">
                                {$recharge_total.today}
                            </div>
                            <div class="layui-col-xs3 layui-col-md6 top-panel-tips">
                                昨日充值<a style="color: #1aa094">{$recharge_total.yesterday}</a><br>
                                前七日充值 <a style="color: #bd3004">{$recharge_total.week}</a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="layui-col-xs12 layui-col-md3">
                <div class="layui-card top-panel">
                    <div class="layui-card-header">当前应用数</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs12 layui-col-md12 top-panel-number">
                                {$app_total}
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    <div class="layuimini-main">
        <div class="layui-box">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header"><i class="fa fa-fire icon"></i>用户统计（应用：人数）</div>
                        <div class="layui-card-body layui-text">
                            <div id="container" style="height: 400px"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header"><i class="fa fa-bullhorn icon icon-tip"></i>系统公告</div>
                        <div class="layui-card-body layui-text">
                            <div id="notice_list"></div>
                            <div id="test1"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layuimini-main">
        <div class="layui-box">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header"><i class="fa fa fa-sign-in icon"></i>登录日志(最近10条)</div>
                        <div class="layui-card-body layui-text">
                            <table class="layui-table">
                        <colgroup>
                            <col width="150">
                            <col width="200">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>用户名</th>
                            <th>登录时间</th>
                            <th>登录IP</th>
                            <th>IP地址</th>
                        </tr>
                        </thead>
                                <tbody id = 'city_info'>
                                <tr>
                                    <td colspan="4" >调用SDK计算ip地址中...</td>
                                </tr>
                                </tbody>
                    </table>
                        </div>
                    </div>
                </div>
<!--                <div class="layui-col-md6">-->
<!--                    <div class="layui-card">-->
<!--                    <div class="layui-card-header"><i class="fa fa-pencil icon icon-tip"></i>更新日志</div>-->
<!--                    <div class="layui-card-body layui-text">-->
<!--                        <ul class="layui-timeline">-->
<!--                            <li class="layui-timeline-item">-->
<!--                                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>-->
<!--                                <div class="layui-timeline-content layui-text">-->
<!--                                    <h3 class="layui-timeline-title">2020年9日25日</h3>-->
<!--                                    <p>-->
<!--                                        上线布网商城应用1.0.2版本收费扩展-->
<!--                                        <br>新增拼团，秒杀，分销功能模块-->
<!--                                    </p>-->
<!--                                </div>-->
<!--                            </li>-->
<!--                            <li class="layui-timeline-item">-->
<!--                                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>-->
<!--                                <div class="layui-timeline-content layui-text">-->
<!--                                    <h3 class="layui-timeline-title">2020年9日20日</h3>-->
<!--                                    <p>-->
<!--                                        上线布网商城应用1.0.0版本-->
<!--                                        <br>官方开源应用-->
<!--                                    </p>-->
<!--                                </div>-->
<!--                            </li>-->
<!--                            <li class="layui-timeline-item">-->
<!--                                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>-->
<!--                                <div class="layui-timeline-content layui-text">-->
<!--                                    <h3 class="layui-timeline-title">2020年9日15日</h3>-->
<!--                                    <p>-->
<!--                                        bwsaas项目上线1.0.0版本-->
<!--                                    </p>-->
<!--                                </div>-->
<!--                            </li>-->
<!--                            <li class="layui-timeline-item">-->
<!--                                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>-->
<!--                                <div class="layui-timeline-content layui-text">-->
<!--                                    <div class="layui-timeline-title">过去</div>-->
<!--                                </div>-->
<!--                            </li>-->
<!--                        </ul>-->
<!--                    </div>-->
<!--                </div>-->
<!--                </div>-->
                </div>
            </div>
        </div>
    </div>
{/block}
{block name="js"}
<script>
    /**
     * 查看公告信息
     **/
    var count = 0;
    layui.use(['bwajax','laypage','echarts'], function () {
        var bwajax = layui.bwajax.instance();
        var laypage = layui.laypage;
        var echarts = layui.echarts;

        $('body').on('click', '.layuimini-notice', function () {
            var title = $(this).children('.layuimini-notice-title').text(),
                noticeTime = $(this).children('.layuimini-notice-extra').text(),
                content = $(this).children('.layuimini-notice-content').html();
            var html = '<div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #2f4056;color: #ffffff">\n' +
                '<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">' + title + '</h4></div>\n' +
                '<div style="font-size: 12px">' + content + '</div>\n' +
                '</div>\n';
            parent.layer.open({
                type: 1,
                title: '系统公告'+'<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">'+noticeTime+'</span>',
                area: ['500px', '400px'],
                shade: 0.2,
                id: 'layuimini-notice',
                btn: ['查看', '取消'],
                btnAlign: 'c',
                moveType: 1,
                content:html,
                success: function (layero) {
                    var btn = layero.find('.layui-layer-btn');
                    btn.find('.layui-layer-btn0').attr({
                        href: 'https://gitee.com/buwangyun/dnmp',
                        target: '_blank'
                    });
                }
            });
        });
        echarts_show(bwajax,echarts);
        //退出登录逻辑
        bwajax.get('manage/member/loginInfo').then(function (response) {
            if(response.data.data.errcode == 0){
                //console.log(response.data.data);
                var data_list = response.data.data.data;
                var html = '';
                for(var i = 0; i < data_list.length; i++) {

                    html+='<tr>\n' +
                        '                                    <td>'+data_list[i].name+'</td>\n' +
                        '                                    <td>'+data_list[i].add_time_date+'</td>\n' +
                        '                                    <td >'+data_list[i].ip+'</td>\n' +
                        '                                    <td>'+data_list[i].city_name+'</td>\n' +
                        '                                </tr>';

                };
                if(data_list.length<1){
                    html =  ' <td colspan="4" >没有记录...</td>';
                }
                $('#city_info').html(html);

            }else{
                layer.msg(response.data.msg);
            }
        }) .catch(function (error) {
            var html =  ' <td colspan="4" style="color: red">SDK异常，请刷新重试...</td>';
            $('#city_info').html(html);
        });
        init_notice(bwajax,1,8,laypage);//加载公告

    });

    function setNoticeList(bwajax,page,limit,laypage,call_back) {
        if(!page)page=1;
        if(!limit)limit=8;
        bwajax.get('manage/member/noticeList?page='+page+'&limit='+limit).then(function (response) {
            if(response.data.data.errcode == 0){
                count = response.data.data.data.total;
                //console.log(response.data.data);
                var data_list = response.data.data.data.list;
                var html = '';
                for(var i = 0; i < data_list.length; i++) {
                    html+='<div class="layuimini-notice">\n' +
                        '                                    <div class="layuimini-notice-title">'+data_list[i].title+'</div>\n' +
                        '                                    <div class="layuimini-notice-extra">'+data_list[i].add_time+'</div>\n' +
                        '                                    <div class="layuimini-notice-content layui-hide">' + data_list[i].content +
                        '                                    </div>\n' +
                        '                                </div>';


                };
                if(data_list.length<1){
                    html =  '  <div class="layuimini-notice">\n' +
                        '                                    <div class="layuimini-notice-title">暂无公告</div>\n' +
                        '                                </div>';
                }
                $('#notice_list').html(html);
                if(call_back){
                    call_back(laypage);
                }
            }else{
                layer.msg(response.data.msg);
            }
        }) .catch(function (error) {
            //console.log(error);
            var html =  '  <div class="layuimini-notice">\n' +
                '                                    <div class="layuimini-notice-title" style="color: red">数据出错</div>\n' +
                '                                </div>';
            $('#notice_list').html(html);
        });
    }

    function init_notice(bwajax,page,limit,laypage) {
        setNoticeList(bwajax,page,limit,laypage,function (laypage) {
            laypage.render({
                elem: 'test1'
                ,limit:8
                ,count:count
                ,jump: function(obj, first){
                    //非首次
                    if(!first){
                        //obj包含了当前分页的所有参数，比如：
                        setNoticeList(bwajax,obj.curr,obj.limit);
                    }
                }
            });
        })
    }

    function echarts_show(bwajax,echarts) {
        bwajax.get('manage/member/echartsInfo').then(function (response) {
            if(response.data.data.errcode == 0){
                var source  = response.data.data.data.data;
                var count  = response.data.data.data.count;
                var year  = response.data.data.data.year;
                for (var i=0;i<source[0].length;i++)
                {
                    source[0][i] = source[0][i].toString();
                }
                //console.log(source);
                //拼装series
               var series  =new Array();
                for (var i=0;i<count;i++)
                {
                    var car =  {type: 'line', smooth: true, seriesLayoutBy: 'row'};
                    series.push(car);
                }
                     var last =  {
                         type: 'pie',
                         id: 'pie',
                         radius: '25%',
                         center: ['50%', '30%'],
                         label: {
                             formatter: '{b}: {@'+year[0]+'} ({d}%)'
                         },
                         encode: {
                             itemName: 'product',
                             value: year[0],
                             tooltip: year[0]
                         }
                     };

                series.push(last);
                var dom = document.getElementById("container");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;

                setTimeout(function () {

                    option = {
                        legend: {},
                        tooltip: {
                            trigger: 'axis',
                            showContent: false
                        },
                        dataset: {
                            source: source
                        },
                        xAxis: {type: 'category'},
                        yAxis: {gridIndex: 0},
                        grid: {top: '55%'},
                        series: series
                    };

                    myChart.on('updateAxisPointer', function (event) {
                        var xAxisInfo = event.axesInfo[0];
                        if (xAxisInfo) {
                            var dimension = xAxisInfo.value + 1;
                            myChart.setOption({
                                series: {
                                    id: 'pie',
                                    label: {
                                        formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                                    },
                                    encode: {
                                        value: dimension,
                                        tooltip: dimension
                                    }
                                }
                            });
                        }
                    });

                    myChart.setOption(option);

                });

                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }

            }else{
                layer.msg(response.data.msg);
            }
        }) .catch(function (error) {
            //console.log(error);

        });


    }
</script>
{/block}



